<template>
  <a-col :span="props.span" class="col">
    <slot>
      <div class="flex">
        <div class="label">{{ props.label }}</div>
        <div :class="[props.block ? 'block' : 'info']">{{ props.value }}</div>
      </div>
    </slot>
  </a-col>
</template>

<script setup>
const props = defineProps({
  label: { type: String, default: '' }, // 标签
  value: { type: String, default: '' }, // 值
  span: { type: Number, default: 12 }, // 占比
  block: { type: Boolean, default: false }, // 值是否换行
})
</script>

<style lang="scss" scoped>
.col {
  margin: 0 0 5px 0;
  padding-left: 10px;
}
.label {
  width: 100px;
  height: 36px;
  color: #56b8ff;
  text-align: center;
  line-height: 36px;
  margin-right: 10px;
  flex-shrink: 0;
  background-color: rgba(32, 115, 179, 0.1);
}

.info {
  flex: 1;
  padding-left: 0.52083vw;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(87, 182, 250, 0.2),
    rgba(87, 182, 250, 0.2) 2px,
    transparent 0,
    transparent 4px
  );
  background-size: 100% 2px;
  background-position: 0 bottom;
  background-repeat: repeat-x;
  color: #d4edff;
  flex: 1;
  height: 36px;
  line-height: 36px;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.block {
  min-height: 45px;
  width: 100%;
  float: left;
  line-height: 45px;
  font-size: 18px;
  color: #d4edff;
  margin-top: -3px;
  background-position-y: -6px;
  background-image: url('@/assets/images/display-block-bg-45px.png');
  background-size: auto auto !important;
  background-repeat: repeat;
  background-attachment: local;
  padding-left: 0.52083vw;
  margin-bottom: -6px;
  overflow-y: auto;
  word-break: break-all;
  white-space: pre-wrap;
}
</style>
